<template>
  <el-container class="articleEdit back-white" ref="box">
    <el-main>
      <div class="mb075">
        <el-breadcrumb separator="/" class="dib vam mr100">
          <el-breadcrumb-item> 文章列表</el-breadcrumb-item>
          <el-breadcrumb-item v-if="!articleId">添加文章</el-breadcrumb-item>
          <el-breadcrumb-item v-if="articleId">修改文章</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="text" class="dib vam" icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
      </div>
      <div class="x-item x-item-none">
        <h5 class="mb075 x-border-bottom pdb075">
          <i class="el-icon-edit-outline mr05 dib vam"></i>
          <span class="x-fs-080 dib vam">文章管理</span>
        </h5>
        <el-form label-width="100px">
          <el-form-item label="文章标题"><el-input v-model="title"></el-input></el-form-item>
          <el-form-item label="文章分类">
            <template slot-scope="scope">
              <el-select v-model="classChoose" placeholder="请选择">
                <el-option v-for="item in classList"
                           :key="item.status"
                           :label="item.text"
                           :value="item.status">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="设置查看权限">
            <el-checkbox v-model="level_one" name="type">游客登录可看</el-checkbox>
            <el-checkbox v-model="level_two" name="type">初级会员可看</el-checkbox>
            <el-checkbox v-model="level_three" name="type">高级会员可看</el-checkbox>
          </el-form-item>
          <el-form-item label="封面图片">
            <update-img @clearImg="imgDel" @change="imgUploadEnd" :imgUrl="logo"></update-img>
          </el-form-item>
          <el-form-item label="内容简介">
            <el-input v-model="content_simple"></el-input>
          </el-form-item>
          <el-form-item label="文章详情">
            <editor-txt :content="content" :width="700" @change="getEditorContent"></editor-txt>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="!articleId" @click="onSubmit">添加</el-button>
            <el-button type="primary" size="medium" v-if="articleId" @click="onSubmit">编辑</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>
<script type="text/ecmascript-6">
  import {createData,getDataDetail,getDateList} from '../../api/api';
  let loading;
  export default{
    data() {
      return {
        articleId: this.$route.query.id, //要编辑的文章id
        title: '', //账号
        classList: [], //分类列表
        classChoose: '', //选择的分类
        level_one: false, // 游客
        level_two: false, // 初级会员
        level_three: true, // 高级会员
        logo: '', //文章封面图片
        content: '', //文章内容
        content_simple: '' //内容简介
      }
    },
    created(){
      this.getClass();
      if(this.articleId){ //如果是编辑 则初始化数据
        let o = {
          "model": "Articles",
          "with":{
          },
          "condition": {
            "article_id": this.articleId
          }
        };
        getDataDetail(o).then((data) => {
          let result = data.data.data;
          this.title = result.title;
          this.classChoose = result.tab_id;
          this.level_one = result.level_one == 1;
          this.level_two = result.level_two == 1;
          this.level_three = result.level_three == 1;
          this.logo = result.thumb;
          this.content_simple = result.content_simple;
          this.content = result.content;
        })
      }
    },
    methods:{
      getClass(){ //获取分类列表
        //先获取分类列表
        let o = {
          "model": "Tabs",
          "limit":20,
          "offset":0,
          "orderBy":"create_time desc",
          "condition":{
            "type":"5"
          },
          "search":{}
        };
        getDateList(o).then((data) => {
          let result = data.data.data.data;
          for(let i = 0; i < result.length; i++){
            let obj = {
              status: result[i].tab_id,
              text: result[i].title
            };
            this.classList.push(obj);
          }
        });
      },
      imgUploadEnd(url){
        console.log(url);
        this.logo = url;
      },
      imgDel(){
        this.logo = '';
      },
      getEditorContent(text){ //获取富文本编辑器内容
        this.content = text;
      },
      checkData(){
        if(!this.title){
          this.tip('请输入文章标题');
          return false;
        }
        if(!this.classChoose){
          this.tip('请选择文章分类');
          return false;
        }
        if(!this.level_one && !this.level_two && !this.level_three){
          this.tip('请至少选择一个权限列表');
          return false;
        }
        if(!this.logo){
          this.tip('请上传封面图片');
          return false;
        }
        if(!this.content_simple){
          this.tip('请输入内容简介');
          return false;
        }
        if(!this.content){
          this.tip('请输入文章内容');
          return false;
        }
        return true;
      },
      onSubmit(){
        if(!this.checkData()){
          return;
        }
        loading = this.$loading({
          target: '.articleEdit',
          text: '提交中,请稍后'
        });
        let o = {
          "model": "Articles",
          "data": {
            title: this.title,
            thumb: this.logo,
            content_simple: this.content_simple,
            content: this.content,
            tab_id: this.classChoose,
            uid:sessionStorage.getItem('u_id'),
            level_one:Number(this.level_three),
            level_two:Number(this.level_two),
            level_three:Number(this.level_one)
          }
        };
        if(this.articleId){
          o.update_condition = {
            "article_id": this.articleId
          }
        }
        createData(o).then((data) => {
          loading.close();
          let text = this.articleId ? '编辑文章' : '添加文章';
          if(data.data.code == 200){
            this.tip(text + '成功','success');
            setTimeout(() => {
              this.$router.go(-1);
            },1000)
          }else{
            this.tip(text + '失败');
          }
        })
      },
      tip(msg,type){
        this.$message({type:type ? type :  'error',message: msg});
      }
    }
  }
</script>
<style>
  .articleEdit .el-input{
    width: 260px;
  }
</style>
